<template>
	<view>
		<live-player id="livePlayer" class="live_box" catchtouchmove autoplay background-mute sound-mode="speaker"
			:src="currentUrl" mode="live" @click="handleControlbar">
			<!-- 正常状态 -->
			<view v-if="!fullScreenFlag && showControlbar" class="operate_box" @tap.stop>
				<view class="left">
					<image v-if="play" @tap.stop="bindPause" src="@/static/imags/play/flv_bf.png.png" />
					<image v-else @tap.stop="bindResume" src="@/static/imags/play/flv_zt.png" />
				</view>
				<view class="right">
					<image v-if="isMute" @tap.stop="bindMute" class="flv_sy" src="@/static/imags/play/flv_sy.png" />
					<image v-else @tap.stop="bindMuteResume" class="flv_sy" src="@/static/imags/play/flv_jy.png" />
					<image @tap.stopfullScreenFlag="full" src="@/static/imags/play/flv_qp.png" />
				</view>
			</view>
			<!-- 全屏状态 -->
			<view v-if="fullScreenFlag && showControlbar" class="operate_box operate_y_box" @tap.stop
				style="height: 36rpx">
				<view class="left">
					<image v-if="play" @tap.stop="bindPause" src="@/static/imags/play/flv_bf.png" />
					<image v-else @tap.stop="bindResume" src="@/static/imags/play/flv_zt.png" />
				</view>
				<view class="right">
					<image v-if="isMute" @tap.stop="bindMute" class="flv_sy" src="@/static/imags/play/flv_sy.png" />
					<image v-else @tap.stop="bindMuteResume" class="flv_sy" src="@/static/imags/play/flv_jy.png" />
					<image @tap.stop="exitfull" src="@/static/imags/play/flv_tcqp.png" />
				</view>
			</view>
		</live-player>

	</view>
</template>

<script>
	export default {
		name: "PlayModal",
		data() {
			return {
				playerCtx: null, // live-player操作
				currentUrl: '', // 播放路径
				showControlbar: true, // 是否显示状态栏
				fullScreenFlag: false, // 是否是全屏
				play: true, // 直播： 恢复与开始
				isMute: true, // 直播： 播放与静音
				timer: '', // 关闭定时器的标识
			};
		},
		mounted() {
			this.getDeviceLive(); // 获取直播流路径
			this.playerCtx = uni.createLivePlayerContext('livePlayer'); // live-play操作上下文对象
			console.log(this.playerCtx);
			setTimeout(() => {
				this.showControlbar = false // 10 秒后关闭直播状态栏
			}, 10000)
		},
		watch: {
			showControlbar(val, oldVal) { // 监听是否显示操作栏的值从而在变化 5s 后关闭操作栏的显示
				if (val) {
					this.timer = setTimeout(() => {
						this.showControlbar = false
					}, 5000)
				} else {
					clearTimeout(this.timer);
				}
			}
		},
		methods: {
			// 获取直播流路径
			async getDeviceLive() {
				this.currentUrl = 'http://47.109.20.187:8081/live/livestream/abc.flv'
			},
			// 是否显示播放状态栏
			handleControlbar() {
				this.showControlbar = !this.showControlbar
			},
			// 暂停播放
			bindPause() {
				this.playerCtx.stop({
					success: res => {
						this.play = false
					},
					fail: res => {
						this.$toast('暂停播放失败')
					}
				})
			},
			// 恢复播放
			bindResume() {
				this.playerCtx.play({
					success: res => {
						this.play = true
					},
					fail: res => {
						this.$toast('暂停播放失败')
					}
				})
			},
			// 静音
			bindMute() {
				this.playerCtx.mute({
					success: res => {
						this.isMute = false
					},
					fail: res => {
						this.$toast('静音失败')
					}
				})
			},
			// 恢复声音
			bindMuteResume() {
				this.playerCtx.mute({
					success: res => {
						this.isMute = true
					},
					fail: res => {
						this.$toast('恢复静音失败')
					}
				})
			},
			// 全屏
			full() {
				this.playerCtx.requestFullScreen({
					direction: 90,
					success: res => {
						this.fullScreenFlag = true
					},
					fail: res => {
						this.$toast('进入全屏失败')
					}
				})
			},
			// 退出全屏
			exitfull() {
				this.playerCtx.exitFullScreen({
					direction: 90,
					success: res => {
						this.fullScreenFlag = false
					},
					fail: res => {
						this.$toast('退出全屏失败')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.live_box {
		width: 100%;
		height: 420rpx;

		// 播放器操作栏
		.operate_box {
			width: 100%;
			height: 72rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			background-color: rgba(43, 51, 63, .7);

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				display: inline-block;
			}

			.flv_sy {
				margin-right: 16rpx;
			}
		}

		.operate_y_box {
			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		#livePlayer {
			width: 100%;
			height: 420rpx;
		}
	}
</style>